<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">在线报名——{{activityData.activity_title}}</nut-navbar>
    <div class="container">
      <div class="swiper row" v-if="swiperList.length > 0">
        <nut-swiper direction="horizontal" :loop="true" :paginationVisible="true" :autoPlay="2500">
          <div class="nut-swiper-slide gray" v-for="(item, index) in swiperList" :key="index">
            <img class="w-100" :src="item.imgUrl"/>
          </div>
          <!--<div class="nut-swiper-slide gray" >-->
            <!--<img class="w-100" src="../../assets/icon/icon-banner.jpg"/>-->
          <!--</div>-->
          <!--<div class="nut-swiper-slide gray" >-->
            <!--<img class="w-100" src="../../assets/icon/icon-banner.jpg"/>-->
          <!--</div>-->
        </nut-swiper>
        <div class="button">
          <router-link class="float yellow text-center m-b-10" :to="`/details?activityId=${activityId}`">活动详情</router-link>
          <router-link class="float c-yellow text-center" to="/orderList">订单中心</router-link>
        </div>
      </div>
      <div class="box f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333">活动须知</div>
        <div class="text c-666">
          <div v-html="activityData.activity_know"></div>
        </div>
      </div>
      <div class="line row"></div>
      <div  v-if="activityData.is_dues">
        <div class="box dis-flex f-s-14 p-t-10 p-b-10">
          <div class="title f-w-b m-b-5 c-333 m-r-10">{{activityData.dues_name}}</div>
          <div class="text c-666">
            <div class="input">
              <input class="f-s-14" type="number" :placeholder="`请输入${activityData.dues_name}`" v-model="costPrice" />
            </div>
          </div>
        </div>
        <div class="line row"></div>
      </div>
      <div v-if="activityData.is_otherfee">
        <div class="box dis-flex just-con-s-b align-items-c f-s-14 p-t-10 p-b-10" v-for="(item, index) in otherList"
             :key="index">
          <div class="title f-w-b m-b-5 c-333">{{item.fee_name}}</div>
          <div class="text c-666">￥{{item.fee_value / 100}}元/人</div>
          <div>
            <nut-stepper :simple="false" :value.sync="item.totalNum"></nut-stepper>
          </div>
        </div>
        <div class="line row"></div>
      </div>
      <div v-if="activityData.is_room">
        <div class="box f-s-14 p-t-10 p-b-10">
          <div class="title f-w-b m-b-5 c-333">
            入住天数
          </div>
          <div class="custom m-t-10">
            <div class="calendar-box dis-flex just-con-s-a c-yellow l-h-45" @click="calendarVisible = true">
              <div>入 {{startTime}}</div>
              <div>共 {{days}} 晚</div>
              <div>离 {{endTime}}</div>
            </div>
            <div class="ruzhu" style="color:red;text-align: center;font-size:14px;margin:5px 0;">请选择入住及离店日期</div>
            <div class="content m-t-10" v-if="roomInfo.length > 0 && activityData.is_room">
              <div class="item dis-flex just-con-s-b align-items-c f-s-14 p-t-10 p-b-10"
                   v-for="(item, index) in roomInfo" :key="index">
                <div class="tit f-w-b m-b-5 c-333">{{item.room_title}}</div>
                <div class="con c-666">￥{{roomSlice[0].list[index].price / 100}}元/间</div>
                <div>
                  <nut-stepper :simple="false" :value.sync="item.roomCount" :max="roomLimit[index]" :min="0"></nut-stepper>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line row"></div>
      </div>
      <div class="box dis-flex f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333 m-r-10">姓名</div>
        <div class="text c-666">
          <div class="input">
            <input class="f-s-14" placeholder="请输入姓名" v-model="checkInUser" />
          </div>
        </div>
      </div>
      <div class="line row"></div>
      <div class="box dis-flex f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333 m-r-10">手机号</div>
        <div class="text c-666">
          <div class="input">
            <input class="f-s-14" placeholder="请输入手机号" v-model="telephone"/>
          </div>
        </div>
      </div>
      <div class="line row"></div>
      <div v-if="activityData.is_bar">
        <div v-for="(item, index) in barList" :key="index">
          <div class="box dis-flex f-s-14 p-t-10 p-b-10">
            <div class="title f-w-b m-b-5 c-333 m-r-10">{{item.bar_name}}</div>
            <div class="text c-666">
              <div class="input">
                <input class="f-s-14" :placeholder="item.bar_value" v-model="item.barValue"/>
              </div>
            </div>
          </div>
          <div class="line row"></div>
        </div>
      </div>
      <div class="box dis-flex f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333 m-r-10">备注</div>
        <div class="text c-666">
          <div class="input">
            <input class="f-s-14" placeholder="请输入备注" v-model="remark" />
          </div>
        </div>
      </div>
      <div class="line row"></div>
      <div v-if="activityData.is_invoice">
        <div class="box dis-flex f-s-14 p-t-10 p-b-10">
          <div class="title f-w-b m-b-5 c-333 m-r-10">开票说明</div>
          <div class="text c-666">
            <div class="input">
              {{activityData.invoice_info || `订单支付后${activityData.is_invoice ? '可' : '不可'}开发票`}}
            </div>
          </div>
        </div>
        <div class="line row"></div>
      </div>
      <div class="box f-s-14 p-t-10 p-b-10 c-666">
        <div class="dis-flex" v-if="activityData.hotel_name">
          <div class="title flex-sh-0">酒店名称：</div>
          <div class="nowrap-ellipsis">{{activityData.hotel_name}}</div>
        </div>
        <div class="dis-flex" v-if="activityData.room_leader">
          <div class="title flex-sh-0">活动接待：</div>
          <div class="nowrap-ellipsis">{{activityData.room_leader}}</div>
        </div>
        <div class="dis-flex" v-if="activityData.roomleader_cell">
          <div class="title flex-sh-0">接待电话：</div>
          <a class="dis-block nowrap-ellipsis c-blue" :href="`tel:${activityData.roomleader_cell}`">
            {{activityData.roomleader_cell}}
          </a>
        </div>
        <div class="dis-flex" v-if="activityData.address">
          <div class="title flex-sh-0">活动地址：</div>
          <div>{{activityData.address}}</div>
        </div>
        <div class="dis-flex" v-if="activityData.traffic">
          <div class="title flex-sh-0">交通指引：</div>
          <div>{{activityData.traffic}}</div>
        </div>
      </div>
      <div class="c-999 text-center m-t-10 m-b-10">请核对支付信息，一经支付，不可退订</div>
    </div>
    <!-- <div class="bottom-btn dis-flex align-items-c l-h-40 m-t-20"> -->
      <div class="bottom-btn dis-flex align-items-c l-h-40 m-t-20" v-if="!outdated">
      <div class="left dis-flex">
        <div class="f-s-16 c-yellow m-r-10 m-l-15">总金额：￥{{totalPrice}}</div>
        <!--<div class="c-666">明细</div>-->
      </div>
      <div class="right text-center c-fff" @click="onorder()">立即支付</div>
    </div>

    


    <router-link v-else class="bottom-btn dis-block l-h-40 m-t-20 bg-666 c-fff text-center w-100"
                 :to="`/details?activityId=${activityId}`">活动已过期</router-link>
    <nut-calendar :is-visible="calendarVisible" type="range" :start-date="now" :is-auto-back-fill="true"
                  :end-date="nextMonth" animation="nutSlideUp" @close="switchPicker('calendarVisible')"
                  @choose="setChooseValue" :default-value="defaultDate" v-if="defaultDate.length > 0">
    </nut-calendar>

    
    <!-- <nut-dialog title="订单明细"  :visible="dialogShow"  @ok-btn-click="submit()" @cancel-btn-click="dialogShow=false" @close="dialogShow=false" >
        <div class="ordercontent" >

            <div class="orderlist" v-for="(item, index) in roomlist" :key="index">

              <div class="orderlist" v-show="isroom == 1">
                <span>房间名：</span><span>{{item.rommtitle}}</span>
                <span>房间数：</span><span>{{item.roomCount}}</span>
              </div>

              <div class="orderlist" v-for="(vo, index) in item.time" :key="index" v-show="index < timelist">
                  <span>{{vo.shijian}}：</span><span>{{vo.jiage}}元</span>
              </div> 

              <div class="orderlist">
                  <span>{{activityData.dues_name}}：</span><span>￥{{costPrice}}</span>
              </div>

            </div>

            <div class="orderlist" v-for="(item, index) in otherList" :key="index">
                <span>{{item.fee_name}}：</span><span>￥{{item.fee_value / 100 * item.totalNum}}</span>
            </div>

            <div class="orderlist">
                <span>合计：</span><span>￥{{totalPrice}}</span>
            </div>
            
        </div>
    </nut-dialog> -->

    <div class="tangchuang" v-if="dialogShow == true">

        <div class="ordercontent" >
            <div class="title" style="margin:15px 0;text-align: center;">订单详情</div>
            <div class="orderlist" v-for="(item, index) in roomlist" :key="index">

              <div class="orderlist" v-show="isroom == 1">
                <span>房间名：</span><span>{{item.rommtitle}}</span>
                <span>房间数：</span><span>{{item.roomCount}}</span>
              </div>

              <div class="orderlist" v-for="(vo, index) in item.time" :key="index" v-show="index < timelist">
                  <span>{{vo.shijian}}：</span><span>{{vo.jiage}}元</span>
              </div> 

              <div class="orderlist">
                  <span>{{activityData.dues_name}}：</span><span>￥{{costPrice}}</span>
              </div>

            </div>

            <div class="orderlist" v-for="(item, index) in otherList" :key="index">
                <span>{{item.fee_name}}：</span><span>￥{{item.fee_value / 100 * item.totalNum}}</span>
            </div>

            <div class="orderlist">
                <span>合计：</span><span>￥{{totalPrice}}</span>
            </div>
            
            
        </div>   

        <div class="off" v-if="dialogShow == true" @click="dialogShow=false">取消</div>
         <div class="on" v-if="dialogShow == true" @click="submit()">确定</div> 
    </div> 

    

    <div class="zhezhao" v-if="dialogShow == true">

    </div>
    
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import wx from "weixin-js-sdk"
  import { placeOrderApi } from '../../api/reserve'
  import { getDetailsByIdApi } from '../../api/record'
  import { weChatPayApi, getSwiperApi } from '../../api/common'
  import { wxInit } from '../../utils/weixin-init'
  import { IconUrl } from '../../utils/auxiliary'
  import { isEmpty, isTelphone } from '../../utils/rules'

  export default {
    data() {
      return {
        activityId: '',
        activityData: {},
        barList: [],
        otherList: [],
        roomInfoOriginal: [],
        roomInfo: [],
        checkInUser: '',
        telephone: '',
        remark: '',
        costPrice: '0',
        totalPrice: 0,
        calendarVisible: false,
        now: null,
        nextMonth: null,
        startTime: '',
        endTime: '',
        days: 2,
        defaultDate: [],
        limitList: [],
        swiperList: [],
        outdated: false,
        roomLimit: [],
        roomSlice: [],


        /*  支付前计算变量 */
        isroom:"",
        isthisorder:"",
        
        /*  支付前计算变量 */
        orderroominfo:"",
        dialogShow: false,
        orderdays:"",
        orderroom:[],

        orderfanjian:[],

        /* 变量使用*/
        outtime:[],
        xuanzhogn:[],

        /**  前端显示 */
       roomlist:[],
       timelist:""
      }
    },
    computed: {
      ...mapGetters([ 'userInfo', 'host', 'shareReady' ])
    },
    watch: {
      otherList: {
        handler: function(val, oldval) {
          this.getTotalPrice()
        },
        deep: true//对象内部的属性监听，也叫深度监听
      },
      roomInfo: {
        handler: function(val, oldval) {
          this.getTotalPrice()
        },
        deep: true//对象内部的属性监听，也叫深度监听
      },
      costPrice (val) {
        this.getTotalPrice()
      },
      startTime () {
        const limitIndex = this.roomInfoOriginal.findIndex(v => v.date === this.startTime)
        const roomSlice = this.roomInfoOriginal.slice(limitIndex, limitIndex + Number(this.days))
        this.roomSlice = roomSlice
        this.getTotalPrice()
        this.limitRoomInfo(this.roomInfoOriginal)
      },
      endTime () {
        const limitIndex = this.roomInfoOriginal.findIndex(v => v.date === this.startTime)
        const roomSlice = this.roomInfoOriginal.slice(limitIndex, limitIndex + Number(this.days))
        this.roomSlice = roomSlice
        this.getTotalPrice()
        this.limitRoomInfo(this.roomInfoOriginal)
      }
    },
    async mounted () {
      if (!/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || !this.shareReady) {
        await wxInit()
      }
      this.activityId = this.$route.query.activityId
      this.getData()
      this.getSwiper()
    },
    methods: {

      // 日历计算时间
      // 计算续住的总日期列表
      getAll(begin, end) {
        let arr1= begin.split("-");
        let arr2= end.split("-");
        let arr1_= new Date();
        let arrTime = [];
        arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
        let arr2_= new Date();
        arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
        let unixDb = arr1_.getTime();
        let unixDe = arr2_.getTime();
        for (let k = unixDb; k <= unixDe;) {
          arrTime.push(this.datetimeparse(k, 'yyyy-MM-DD'));
          k = k + 24 * 60 * 60 * 1000;
        }
        return arrTime;
      },
      
      // 时间格式处理
      datetimeparse (timestamp, format, prefix) {
          if (typeof timestamp =='string'){
              timestamp=Number(timestamp)
          };
          //转换时区
          let currentZoneTime = new Date (timestamp);
          let currentTimestamp = currentZoneTime.getTime ();
          let offsetZone = currentZoneTime.getTimezoneOffset () / 60;//如果offsetZone>0是西区，西区晚
          let offset = null;
          //客户端时间与服务器时间保持一致，固定北京时间东八区。
          offset = offsetZone + 8;
          currentTimestamp = currentTimestamp + offset * 3600 * 1000

          let newtimestamp = null;
          if (currentTimestamp) {
              if (currentTimestamp.toString ().length === 13) {
                  newtimestamp = currentTimestamp.toString ()
              } else if (currentTimestamp.toString ().length === 10) {
                  newtimestamp = currentTimestamp + '000'
              } else {
                  newtimestamp = null
              }
          } else {
              newtimestamp = null
          }
          ;
          let dateobj = newtimestamp ? new Date (parseInt (newtimestamp)) : new Date ()
          let YYYY = dateobj.getFullYear ()
          let MM = dateobj.getMonth () > 8 ? dateobj.getMonth () + 1 : '0' + (dateobj.getMonth () + 1)
          let DD = dateobj.getDate () > 9 ? dateobj.getDate () : '0' + dateobj.getDate ()
          let HH = dateobj.getHours () > 9 ? dateobj.getHours () : '0' + dateobj.getHours ()
          let mm = dateobj.getMinutes () > 9 ? dateobj.getMinutes () : '0' + dateobj.getMinutes ()
          let ss = dateobj.getSeconds () > 9 ? dateobj.getSeconds () : '0' + dateobj.getSeconds ()
          let output = '';
          let separator = '/'
          if (format) {
              separator = format.match (/-/) ? '-' : '/'
              output += format.match (/yy/i) ? YYYY : ''
              output += format.match (/MM/) ? (output.length ? separator : '') + MM : ''
              output += format.match (/dd/i) ? (output.length ? separator : '') + DD : ''
              output += format.match (/hh/i) ? (output.length ? ' ' : '') + HH : ''
              output += format.match (/mm/) ? (output.length ? ':' : '') + mm : ''
              output += format.match (/ss/i) ? (output.length ? ':' : '') + ss : ''
          } else {
              output += YYYY + separator + MM + separator + DD
          }
          output = prefix ? (prefix + output) : output

          return newtimestamp ? output : ''
      },

      //日历计算end

      onorder(){
        // for (let z = 0; z < this.outtime.length; z++) {
        //   this.$delete(this.outtime,[z])
        // }
        // for (let x = 0; x < this.xuanzhogn.length; x++) {
        //   this.$delete(this.xuanzhogn,[x])
        // }
        
        // console.log(this.outtime)
        // console.log(this.xuanzhogn)
        this.orderroom = []
        this.outtime = []
        this.xuanzhogn =[]
        this.roomlist=[]
       

        const error = isTelphone(this.telephone, '请输入正确的电话')
          || isEmpty(this.checkInUser, '请输入姓名')
        if (error) {
          return this.$toast.text(error)
        }

        if (this.isroom != 0) {

          if (this.endTime == "" || this.endTime == undefined) {
            return this.$toast.text('未选择入住时间')
          }
        }
        
        
        if (this.totalPrice <= 0) {
          return this.$toast.text('价格为0，无需提交')
        }
        //end
        this.dialogShow = true
        //获取房间
        for (let i = 0; i < this.roomInfo.length; i++) {
            if(this.roomInfo[i].roomCount > 0){
              this.orderroom.push({
                  rommtitle:this.roomInfo[i].room_title,
                  roomCount:this.roomInfo[i].roomCount,
                  ordertime:[],
                  time:[]
              })
            }
        }

        
        // console.log(this.orderdays)

        if(this.isroom != 0){
          //获取选择的时间
          let time = this.getAll(this.orderdays[0][3],this.orderdays[1][3])
          this.timelist = time.length - 1 
          console.log(this.timelist)
          for (let vo = 0; vo < this.orderroom.length; vo++) {
              this.orderroom[vo].ordertime.push(time)
          }
        }
        console.log(this.orderroom)
        
       
        //把所有可以选择的房间时间拿出来
       
        for (let num = 0; num < this.orderroominfo.length; num++) {
            for (let num2 = 0; num2 < this.orderroominfo[num].list.length; num2++) {
                let data = {
                    room:"",
                    time:"",
                    price:""
                }
                data.room = this.orderroominfo[num].list[num2].room_title
                data.time = this.orderroominfo[num].list[num2].day
                data.price = this.orderroominfo[num].list[num2].price
                this.outtime.push(data)
            }
        }
        

        
        for (let u = 0; u < this.orderroom.length; u++) {
          for (let u2 = 0; u2 < this.orderroom[u].ordertime[0].length; u2++) {
              for (let u3 = 0; u3 < this.outtime.length; u3++) {
                if(this.orderroom[u].rommtitle == this.outtime[u3].room && this.orderroom[u].ordertime[0][u2] == this.outtime[u3].time){
                  this.xuanzhogn.push(this.outtime[u3])
                }
              }
          }
        }

        console.log(this.xuanzhogn)

        this.roomlist = this.orderroom

        console.log(this.roomlist)
    
        for (let i = 0; i < this.xuanzhogn.length; i++) {
            for (let z = 0; z < this.roomlist.length; z++) {
                if(this.xuanzhogn[i].room == this.roomlist[z].rommtitle){
                    this.roomlist[z].time.push({
                      shijian:this.xuanzhogn[i].time,
                      jiage:this.xuanzhogn[i].price / 100 
                    })
                }
                
            }
        }
        console.log(this.roomlist)

      },
      async getData () {
        const { activityById, barList, otherList, roominfo } = await getDetailsByIdApi({ activityId: this.activityId })
        this.outdated = moment().isAfter(moment(activityById.end_time))
        const newBarList = barList.map(v => {
          return Object.assign({}, v, { barValue: '' })
        })
        const newOtherList = otherList.map(v => {
          return Object.assign({}, v, { totalNum: 0 })
        })
        const newRoomInfo = roominfo.length > 0 && roominfo[0].list.map(v => {
          return Object.assign({}, v, { roomCount: 0 })
        })
        const roomSort = roominfo.length > 0 && roominfo.sort((a, b) => {
          return moment(a.date).diff(moment(b.date))
        })
        this.isroom = activityById.is_room
        if (activityById.is_room) {
          this.startTime = activityById.is_room ? moment(roomSort[0].date).format('YYYY-MM-DD') : ''
          // this.endTime = moment(roomSort[roomSort.length - 1].date).add(1, 'd').format('YYYY-MM-DD')
          this.now = moment(roomSort[0].date).format('YYYY-MM-DD')
          this.nextMonth = moment(roomSort[roomSort.length - 1].date).add(1, 'd').format('YYYY-MM-DD')
          this.days = roomSort.length
          this.defaultDate = [this.startTime, this.endTime]
          this.roomInfo = newRoomInfo
          this.roomInfoOriginal = roomSort
          this.limitRoomInfo(roomSort)
        }
        this.activityData = activityById
        this.orderroominfo = roominfo
        this.barList = newBarList ? newBarList : []
        this.otherList = newOtherList ? newOtherList : []
        const imgUrl = IconUrl(`${activityById.activity_icon}`)
        const _this = this
          wx.ready(function() {
            wx.updateAppMessageShareData({
              title: '在线报名—' + activityById.activity_title, // 分享标题
              desc: activityById.activity_info,
              link: 'http://' + _this.host + '/reserve?activityId=' + _this.activityId, // 分享链接,将当前登录用户转为puid,以便于发展下线
              imgUrl: imgUrl // 分享图标
            })
            wx.updateTimelineShareData({
              title: '在线报名—' + activityById.activity_title, // 分享标题
              desc: activityById.activity_info,
              link: 'http://' + _this.host + '/reserve?activityId=' + _this.activityId, // 分享链接,将当前登录用户转为puid,以便于发展下线
              imgUrl: imgUrl // 分享图标
            })
          })
      },
      limitRoomInfo (roomSort) {
        let roomObj = {}
        roomSort[0].list.forEach((v, i) => {
          Object.assign(roomObj, {[`${i}`]: []})
        })
        let roomLimit = []
        this.roomSlice.forEach(val => {
          val.list.forEach((v, i) => {
            roomObj[i].push(v.num)
          })
        })
        for (let item in roomObj) {
          roomLimit.push(roomObj[item].sort((a, b) => {return a - b})[0])
        }
        this.roomLimit = roomLimit
      },
      async getSwiper () {
        const swiperList = await getSwiperApi({ id: this.activityId })
        this.swiperList = swiperList.map(v => {
          return Object.assign({}, { imgUrl: IconUrl(v.photoUrl) })
        })
      },
      async submit () {
        
        
        
        const tbOrderUserInfo = this.barList.map(v => {
          return { barId: v.id, barValue: v.barValue }
        })
        const tbOrderCharges = this.otherList.map(v => {
          return { feeId: v.id, totalPrice: v.fee_value * Number(v.totalNum), totalNum: v.totalNum }
        })
        const priceObj = {}
        this.isthisorder = ""
        if(this.isroom != 0){
            
            this.roomSlice[0].list.forEach((v, i) => {
              Object.assign(priceObj, {[`${i}`]: 0})
            })
            this.roomInfo.forEach((item, index) => {
              this.roomSlice.forEach(v => {
                priceObj[index] += v.list[index].price
              })
            })
            const tbOrderRoom = this.roomInfo.map((v, i) => {
              return {
                roomId: v.teamId,
                totalPrice: priceObj[i] * v.roomCount,
                roomCount: v.roomCount,
                inTime: this.startTime,
                outTime: this.endTime,
                nightCount: this.days
              }
            })
            this.isthisorder = tbOrderRoom
            
        }else{
            const tbOrderRoom = this.roomInfo.map((v, i) => {
              return {
                
              }
            })
            this.isthisorder = tbOrderRoom
        }

        

        const data = {
          checkInUser: this.checkInUser,
          orderUserId: this.userInfo.userId,
          telephone: this.telephone,
          remark: this.remark,
          totalPrice: Number(this.totalPrice) * 100,
          activityId: this.activityId,
          otherPrice: Number(this.costPrice) * 100,
          tbOrderCharges,
          tbOrderUserInfo,
          tbOrderRoom:this.isthisorder
        }
        try {
          const { orderId = '', state, msg = '' } = await placeOrderApi(data)
          if (state === 2) {
            return this.$toast.text(msg || '下单失败')
          }
          const dataToPay = {
            orderId,
            body: '下单成功',
            totalFee: Number(this.totalPrice) * 100,
            payType: 'team',
            userId: this.userInfo.userId,
          }
          const res = await weChatPayApi(dataToPay)
          if(res.code === 0){
            const _this = this
            wx.chooseWXPay({
              timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: res.data.paySign, // 支付签名
              success: function (data) {
                _this.$toast.text('支付成功')
                _this.$router.push('/orderList')
              },
              error: function (err) {
                _this.$toast.text('支付失败')
              }
            })
          } else {
            this.$toast.text(res.errorMsg)
          }
        } catch (e) {
          this.$toast.text(e || '服务异常')
        }
      },
      switchPicker(param) {
        this[`${param}`] = !this[`${param}`];
      },
      setChooseValue(param) {
        this.startTime = param[0][3]
        this.endTime = param[1][3]
        this.days = (moment(param[1][3]) - moment(param[0][3])) / 1000 / 60 / 60 / 24
        this.orderdays = param
      },
      getTotalPrice () {
        let totalPrice = this.costPrice ? Number(this.costPrice) * 100 : 0
        // const limitIndex = this.roomInfoOriginal.findIndex(v => v.date === this.startTime)
        // const roomSlice = this.roomInfoOriginal.slice(limitIndex, limitIndex + Number(this.days))
        this.roomSlice.forEach(v => {
          v.list.forEach((val, index) => {
            totalPrice += val.price * this.roomInfo[index].roomCount
          })
        })
        this.otherList.forEach(v => {
          totalPrice += (v.fee_value * v.totalNum)
        })
        this.totalPrice = totalPrice / 100
      }
    }
  }
</script>

<style scoped lang="scss">
  .swiper {
    position: relative;
    .button {
      position: absolute;
      top: 30px;
      right: 0;
      .float {
        padding: 5px 10px;
        background: #1C1C1B;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        opacity: 0.8;
      }
      .yellow {
        color: #1C1C1B;
        background: #CBA15A;
      }
    }
  }
  .box {
    .title {
      width: 80px;
    }
    .text {
      .input {
        input {
          border: none;
          outline: none;
        }
      }
    }
    .custom {
      .calendar-box {
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 5px;
        background: #1B1B1B;
      }
      .content {
        .item {
          .tit {
            width: 30%;
          }
          .con {
            width: 30%;
          }
        }
      }
    }
  }
  .line {
    height: 5px;
    background: #F1F1F1;
  }
  .bottom-btn {
    .left {
      width: 60%;
    }
    .right {
      width: 40%;
      background: #B29462;
    }
  }
  .ordercontent{
    overflow-x: auto;
      width: 100%;
      float: left;
      height: 63.5vh;
      .orderlist{
        width: 100%;
        float: left;
        span{
          display: block;
          width: 50%;
          float: left;
          margin-bottom:8px;
        }
        span:nth-child(1){
          text-align: right;
        }
        span:nth-child(2){
          text-align: left;
        }
         span:nth-child(3){
          text-align: right;
        }
         span:nth-child(4){
          text-align: left;
        }
      }
  }
  .zhezhao{
    background: #000;
    opacity: 0.5;
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    height: 100%;

  }
  .tangchuang{
    position: fixed;
    
    width: 85%;
    height: 70vh;
    top:70px;
    background: #fff;
    z-index: 100;
    left: 0px;
    right: 0px;
    margin-left:auto;
    margin-right:auto;
    
    border-radius: 3px;
  }
  .off{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 50%;
    padding:10px 0;
    border-top:1px solid #ddd;
  }
  .on{
   position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 50%;
    padding:10px 0;
    border-top:1px solid #ddd;
    background: #B29462;
    color:#fff;
  }
</style>
